<template>
<div>
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="名称">
      <el-input v-model="form.search" placeholder="名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="success" @click="dialogVisible1 = true">事件记录</el-button>
      <el-button type="info" @click="dialogVisible2 = true">新增</el-button>
    </el-form-item>
  </el-form>
  <el-dialog
    title="事件记录"
    :visible.sync="dialogVisible1"
    width="50%"
    :before-close="handleClose">
    <div id="widgetIframe">
      <iframe width="100%"
              height="350"
              :src="'http://106.15.227.184/index.php?module=Widgetize&action=iframe&secondaryDimension=eventName&disableLink=0&widget=1&moduleToWidgetize=Events&actionToWidgetize=getAction&idSite=1&period=day&date=today&disableLink=1&widget=1'+token"
              scrolling="yes"
              frameborder="0"
              marginheight="0"
              marginwidth="0">
      </iframe>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
  </span>
  </el-dialog>

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="埋点ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="250">
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      width="150">
    </el-table-column>
    <el-table-column
      prop="resourceName"
      width="250"
      label="资源名称">
    </el-table-column>
    <el-table-column
      label="状态"
      width="150">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.state === 1"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleChange(scope.row)"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-popconfirm
          title="确定删除吗？"
          @onConfirm="deleteEvent(scope.row.id)"
        >
          <el-button type="danger" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="form.size"
    @current-change="handleCurrentChange"
  >
  </el-pagination>

  <el-dialog
    title="添加埋点"
    :visible.sync="dialogVisible2"
    width="50%"
    :before-close="handleClose">

    <el-form ref="ruleForm" label-width="80px" :rules="rules">
      <el-form-item label="埋点名称" prop="name" required>
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="埋点类型" prop="type" required>
        <el-select v-model="addForm.type" placeholder="请选择请求类型">
          <el-option label="添加" value="1"></el-option>
          <el-option label="删除" value="2"></el-option>
          <el-option label="修改" value="3"></el-option>
          <el-option label="查询" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资源id" prop="resourceId" required>
        <el-input v-model="addForm.resourceId"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button type="success" @click="save('addFrom')">保 存</el-button>
      <el-button type="primary" @click="dialogVisible2 = false">关 闭</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import {changeEvent, deleteEvent, getAllEvent, saveEvent} from "@/api/eventManage";

export default {
  name: "index",
  data() {
    return {
      token: '&token_auth=845434bb464e17745b540679ce8fe9a8',
      dialogVisible1: false,
      dialogVisible2: false,
      formInline: true,
      tableData: [],
      total: undefined,
      form: {
        search: undefined,
        page: 1,
        size: 10
      },
      addForm: {
        name: undefined,
        type: undefined,
        resourceId: undefined
      },
      rules: {
        name: [
          {required: true, message: '请输入埋点名称', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '请输入埋点类型', trigger: 'blur'}
        ],
        resourceId: [
          {required: true, message: '请输入资源id', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    handleClose() {
      this.dialogVisible1 = false
      this.dialogVisible2 = false
      this.addForm = {
        name: undefined,
        type: undefined,
        resourceId: undefined
      }
    },
    onSubmit() {
      this.init()
    },
    handleCurrentChange(page) {
      this.form.page = page
      this.init()
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveEvent(this.addForm).then(res => {
            if (res.body.data) {
              this.$message.success("添加成功")
              this.handleClose()
            } else
              this.$message.error("请重新添加")
          })
        } else {
          this.$message.error("请输入必选项");
          return false;
        }
      })
    },
    handleChange(row) {
      changeEvent(row.id).then(res => {
        if (res.body.data) {
          if (row.state == 1)
            row.state = 0;
          else
            row.state = 1;
        }
      })
    },
    init() {
      getAllEvent(this.form).then(res => {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
      })
    },
    deleteEvent(id) {
      deleteEvent(id).then(res => {
        if (res.body.data) {
          this.$message.success("删除成功")
          this.init()
        } else {
          this.$message.error("请重新删除")
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
